<template>
	<view class="goods-card">
		<view class="goods-cover">
			<img class="goods-cover-img" src="https://cdn.uviewui.com/uview/swiper/swiper3.png" alt="">
		</view>
		
		<view class="goods-name">
			烤肉拌饭+脆皮鸡+荷包蛋+热狗+盒饮
		</view>
		
		<view class="goods-operation">
			<view class="price">
				￥<span class="price-main">1</span>.8
			</view>
			
			<van-icon name="add" color="#EF805F" size="50rpx" :badge="badge"/>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.goods-card{
		width: 48%;
		height: auto;
		min-height: 40rpx;
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
		box-shadow:  0px 0px 6px rgba(0, 0, 0, .12);
		border-radius: 20rpx;
		
		.goods-cover{
			width: 100%;
			height: 300rpx;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;
			
			.goods-cover-img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		
		.goods-name{
			width: calc(100% - 30rpx);
			height: auto;
			min-height: 40rpx;
			font-size: 28rpx;
			font-weight: 550;
			padding: 15rpx 0 0;
			color: #000;
			line-height: 1.3;
			margin: 0 auto;
		}
		
		.goods-operation{
			width: calc(100% - 30rpx);
			height: 80rpx;
			display: flex;
			align-items: center;;
			justify-content: space-between;
			margin: 0 auto;
			font-size: 28rpx;
			color: red;
			letter-spacing: 2rpx;
			
			.price-main{
				font-size: 34rpx
			}
		}
	}
</style>